<template>
    <div class="customer-detail">
        <van-nav-bar title="个人信息" :border="false"
                     left-arrow fixed placeholder
                     @click-left="$router.back()"/>
        <white-space/>
        <van-form>
            <van-field readonly is-link center class="customer-set-avatar" label="头像"
                       input-align="right" @click.stop="showAvatarActionSheet = true">
                <template #input>
                    <van-image round height="50px" width="50px" fit="cover" :src="customer.avatar"/>
                </template>
            </van-field>
            <van-field readonly clickable label="用户名" :value="customer.username" @click.stop="handleUsernameClick"/>
            <van-field readonly is-link label="昵称" :value="customer.nickname" @click.stop="handleRouteToSetNickname"/>
            <van-field readonly is-link label="性别" :value="genderName" @click="showGenderPicker = true"/>
            <van-field readonly is-link label="出生日期" placeholder="请选择出生日期" :value="birthdate"
                       @click="showBirthdateDatePicker = true"/>
        </van-form>
        <van-uploader class="customer-set-avatar-uploader" ref="avatarUploader" :capture="avatarUploaderCapture"/>
        <van-action-sheet v-model="showAvatarActionSheet" :actions="avatarActions"
                          cancel-text="取消" close-on-click-action
                          @select="handleSelectAvatarUploaderCapture"/>
        <van-popup v-model="showBirthdateDatePicker" position="bottom">
            <van-datetime-picker type="date"
                                 :value="birthdateDate"
                                 :min-date="new Date(1900,1,1)"
                                 @cancel="showBirthdateDatePicker = false"
                                 @confirm="handleBirthdateConfirm"/>
        </van-popup>
        <van-popup v-model="showGenderPicker" position="bottom">
            <van-picker show-toolbar :columns="genderColumns"
                        :default-index="genderIndex"
                        @cancel="showGenderPicker = false"
                        @confirm="handleGenderConfirm"/>
        </van-popup>
    </div>
</template>

<script>
  import Empty from "../../components/Empty"
  import WhiteSpace from "../../components/WhiteSpace"
  import { ActionSheet, Cell, DatetimePicker, Field, Form, Image, NavBar, Picker, Popup, Toast, Uploader } from "vant"
  import _ from "lodash"
  import { customer } from "@mall/api-services"
  import dayjs from "dayjs"

  const { Gender } = customer

  const GENDER_COLUMNS = [
    {
      value: Gender.Unknown,
      text: "保密",
    },
    {
      value: Gender.Male,
      text: "男",
    },
    {
      value: Gender.Female,
      text: "女",
    }]

  const AVATAR_ACTIONS = [
    {
      name: "拍照上传",
      capture: "camera",
    },
    {
      name: "本地上传",
      capture: undefined,
    }]

  export default {
    name: "CustomerDetail",
    components: {
      Empty,
      WhiteSpace,
      [ActionSheet.name]: ActionSheet,
      [Image.name]: Image,
      [Cell.name]: Cell,
      [DatetimePicker.name]: DatetimePicker,
      [Field.name]: Field,
      [Form.name]: Form,
      [Uploader.name]: Uploader,
      [NavBar.name]: NavBar,
      [Picker.name]: Picker,
      [Popup.name]: Popup,
    },
    props: {
      id: String,
    },
    computed: {
      genderName() {
        const { customer: aCustomer } = this
        const genderObject = _.find(this.genderColumns, column => column.value === aCustomer.gender)
        return _.isUndefined(genderObject) ? "保密" : genderObject.text
      },
      genderIndex() {
        const { customer: aCustomer } = this
        const index = _.findIndex(this.genderColumns, column => column.value === aCustomer.gender)
        return index === -1 ? 0 : index
      },
      birthdateDate() {
        const { customer: aCustomer } = this
        return dayjs(aCustomer.birthdate).toDate()
      },
      birthdate() {
        const { customer: aCustomer } = this
        return dayjs(aCustomer.birthdate).format("YYYY-MM-DD")
      },
    },
    watch: {
      // "$router": "refreshCustomer",
    },
    data() {
      return {
        showAvatarActionSheet: false,
        showGenderPicker: false,
        showBirthdateDatePicker: false,
        avatarActions: AVATAR_ACTIONS,
        avatarUploaderCapture: undefined,
        genderColumns: GENDER_COLUMNS,
        customer: new customer.Customer(),
      }
    },
    created() {
      this.refreshCustomer()
    },
    methods: {
      refreshCustomer() {
        const { id } = this
        customer.CustomerServiceV1.getCustomer(id)
          .then(aCustomer => this.customer = aCustomer)
      },
      setCustomer(aCustomer) {
        customer.CustomerServiceV1.setCustomer(aCustomer)
          .then(newCustomer => this.customer = newCustomer)
          .then(() => Toast.success("设置成功"))
      },
      handleSelectAvatarUploaderCapture({ capture }) {
        this.avatarUploaderCapture = capture
        Toast("正在开发中...")
        // this.$nextTick(() => {
        //   this.$refs.avatarUploader.chooseFile()
        // })
      },
      handleUsernameClick() {
        Toast("用户名不支持修改哟~")
      },
      handleRouteToSetNickname() {
        const { id, customer: aCustomer } = this
        this.$router.push(`/customers/${id}/nickname/${aCustomer.nickname}`)
      },
      handleBirthdateConfirm(value) {
        this.showBirthdateDatePicker = false
        const aCustomer = new customer.Customer()
        aCustomer.id = this.id
        aCustomer.birthdate = dayjs(value).format("YYYY-MM-DD")
        this.setCustomer(aCustomer)
      },
      handleGenderConfirm({ value }) {
        this.showGenderPicker = false
        const aCustomer = new customer.Customer()
        aCustomer.id = this.id
        aCustomer.gender = value
        this.setCustomer(aCustomer)
      },
    },
  }
</script>

<style lang="scss">
    .customer-detail {
        .set-nickname-dialog, .van-dialog {
            .van-dialog__header {
                padding-top: 12px;
            }
        }

        .customer-set-avatar-uploader {
            display: none;
        }
    }

</style>
